<template>
	<view class="modal-overlay" v-if="visible" @click="handleClose">
		<view class="modal-content" @click.stop>
			<view class="modal-header">
				<view class="modal-tabs" v-if="tabs.length > 1">
					<view 
						class="tab-item" 
						v-for="tab in tabs" 
						:key="tab.key"
						:class="{ active: activeTab === tab.key }" 
						@click="switchTab(tab.key)"
					>
						<text class="tab-text">{{ tab.label }}</text>
						<text class="tab-count" v-if="tab.count !== undefined">({{ tab.count }})</text>
					</view>
				</view>
				<view class="single-title" v-else>
					<text class="title-text">{{ title }}</text>
				</view>
				<view class="close-btn" @click="handleClose">✕</view>
			</view>
			
			<!-- 学生模式 -->
			<view class="student-grid" v-if="displayMode === 'student'">
				<view class="student-item" v-for="student in currentStudents" :key="student.id">
					<view class="student-avatar">
						<text class="avatar-text">{{ student.avatar || student.name.charAt(0) }}</text>
					</view>
					<text class="student-name">{{ student.name }}</text>
				</view>
			</view>

			<!-- 科目模式 -->
			<view class="subject-grid" v-else-if="displayMode === 'subject'">
				<view class="subject-item" v-for="subject in subjects" :key="subject.id" @click="selectSubject(subject)">
					<view class="subject-icon" :class="subject.color">
						<text class="subject-icon-text">{{ subject.icon }}</text>
					</view>
					<text class="subject-name">{{ subject.name }}</text>
				</view>
			</view>
			
			<view class="modal-bottom-indicator"></view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'StudentListModal',
	props: {
		// 弹窗是否显示
		visible: {
			type: Boolean,
			default: false
		},
		// 弹窗标题（单标题模式）
		title: {
			type: String,
			default: ''
		},
		// Tab配置（多Tab模式）
		tabs: {
			type: Array,
			default: () => []
		},
		// 学生数据
		studentData: {
			type: Object,
			default: () => ({})
		},
		// 默认激活的Tab
		defaultActiveTab: {
			type: String,
			default: ''
		},
		// 显示模式：'student' | 'subject'
		displayMode: {
			type: String,
			default: 'student'
		},
		// 科目数据（科目选择模式）
		subjects: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			activeTab: this.defaultActiveTab || (this.tabs.length > 0 ? this.tabs[0].key : '')
		}
	},
	computed: {
		currentStudents() {
			if (this.tabs.length > 1) {
				return this.studentData[this.activeTab] || [];
			} else {
				return this.studentData.students || [];
			}
		}
	},
	watch: {
		visible(newVal) {
			if (newVal) {
				this.activeTab = this.defaultActiveTab || (this.tabs.length > 0 ? this.tabs[0].key : '');
			}
		},
		defaultActiveTab(newVal) {
			if (newVal) {
				this.activeTab = newVal;
			}
		}
	},
	methods: {
		handleClose() {
			this.$emit('close');
		},
		switchTab(tabKey) {
			this.activeTab = tabKey;
			this.$emit('tab-change', tabKey);
		},
		selectSubject(subject) {
			this.$emit('subject-select', subject);
		}
	}
}
</script>

<style lang="less" scoped>
@primary-color: #4DD0E1;
@secondary-color: #81C784;
@text-color: #333;
@text-light: #666;
@text-lighter: #999;
@white: #fff;

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
	z-index: 1000;

	.modal-content {
		width: 100%;
		background: @white;
		border-radius: 24rpx 24rpx 0 0;
		padding: 0;
		position: relative;
		animation: slideUp 0.3s ease-out;

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 30rpx 0rpx;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 8rpx;
				background: linear-gradient(90deg, @primary-color 0%, @secondary-color 100%);
				border-radius: 24rpx 24rpx 0 0;
			}

			.modal-tabs {
				display: flex;
				flex: 1;

				.tab-item {
					flex: 1;
					padding: 20rpx;
					text-align: center;
					position: relative;
					margin-bottom: 20rpx;

					&.active {
						.tab-text {
							color: @primary-color;
							font-weight: bold;
						}

						&::after {
							content: '';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 60rpx;
							height: 4rpx;
							background: @primary-color;
							border-radius: 2rpx;
						}
					}

					.tab-text {
						font-size: 28rpx;
						color: @text-lighter;
						transition: all 0.3s;
					}

					.tab-count {
						font-size: 24rpx;
						color: @text-lighter;
						margin-left: 4rpx;
					}
				}
			}

			.single-title {
				flex: 1;
				text-align: center;
				margin-bottom: 20rpx;

				.title-text {
					font-size: 32rpx;
					font-weight: bold;
					color: @text-color;
				}
			}

			.close-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: @text-lighter;
				font-size: 32rpx;
				margin-left: 20rpx;
			}
		}

		.student-grid, .subject-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 30rpx;
			padding: 40rpx 30rpx;

			.student-item, .subject-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12rpx;
				padding: 20rpx;
				border-radius: 16rpx;
				transition: all 0.2s;

				&:active {
					background: #f5f5f5;
					transform: scale(0.95);
				}

				.student-avatar, .subject-icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: @primary-color;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 8rpx;

					.avatar-text, .subject-icon-text {
						font-size: 32rpx;
						color: @white;
						font-weight: bold;
					}
				}

				.subject-icon {
					border-radius: 20rpx;

					&.cyan { background: @primary-color; }
					&.orange { background: #FF9800; }
					&.yellow { background: #FFC107; }
					&.purple { background: #9C27B0; }
					&.red { background: #F44336; }
					&.blue { background: #2196F3; }
					&.brown { background: #8D6E63; }
					&.light-blue { background: #03A9F4; }
					&.teal { background: #009688; }
					&.green { background: #4CAF50; }
				}

				.student-name, .subject-name {
					font-size: 24rpx;
					color: @text-light;
					text-align: center;
				}
			}
		}

		.modal-bottom-indicator {
			width: 200rpx;
			height: 8rpx;
			background: #e0e0e0;
			border-radius: 4rpx;
			margin: 0 auto 20rpx;
		}
	}
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}
</style>
